<script setup lang="ts">
import { ref, computed } from 'vue'
import { useUserStore } from '../stores/user'
import { useRouter } from 'vue-router'

const userStore = useUserStore()
const router = useRouter()

// 用户信息
const currentUser = computed(() => userStore.currentUser)

// 控制侧边栏折叠状态
const isCollapse = ref(false)
const toggleSidebar = () => {
  isCollapse.value = !isCollapse.value
}

// 退出登录
const handleLogout = () => {
  userStore.logout()
}

// 菜单项配置
const menuItems = computed(() => {
  // 所有用户都可以访问的公共菜单项
  const commonItems = [
    {
      index: '/welcome',
      title: '欢迎页面',
      icon: 'HomeFilled'
    },
    {
      index: '/heritage-protection',
      title: '文化遗产保护意识',
      icon: 'House'
    },
    {
      index: '/protection-tips',
      title: '文物保护小贴士',
      icon: 'InfoFilled'
    }
  ]

  // 根据用户角色显示不同的菜单项
  const roleSpecificItems = []

  if (currentUser.value) {
    // 管理员菜单项
    if (currentUser.value.role === 'admin') {
      roleSpecificItems.push(
        {
          index: '/feature-management',
          title: '地理要素管理',
          icon: 'MapLocation'
        },
        {
          index: '/behavior-management',
          title: '不文明行为管理',
          icon: 'Warning'
        }
      )
    }

    // 游客菜单项
    else if (currentUser.value.role === 'tourist') {
      roleSpecificItems.push(
        {
          index: '/visitor',
          title: '景点信息浏览',
          icon: 'Location'
        },
        {
          index: '/report-behavior',
          title: '不文明行为举报',
          icon: 'Warning'
        }
      )
    }


  }

  // 合并公共菜单项和角色特定菜单项
  return [...commonItems, ...roleSpecificItems]
})
</script>

<template>
  <el-container class="layout-container">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="header-left">
        <div class="logo-container">
          <svg class="logo-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM368 744h-80V280h80v464zm192 0h-80V280h80v464zm192 0h-80V280h80v464z" fill="#fff"/>
          </svg>
          <h1 class="logo-text">北京旅游系统</h1>
        </div>
        <el-button type="text" @click="toggleSidebar">
          <el-icon :size="20" color="#fff">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
              <path fill="currentColor" d="M160 448a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32H160zm448 0a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32H608zM160 896a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32H160zm448 0a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32H608z"/>
            </svg>
          </el-icon>
        </el-button>
      </div>
      <div class="header-right">
        <span class="welcome-text">欢迎您，{{ currentUser?.name }}</span>
        <el-dropdown trigger="click">
          <span class="user-dropdown">
            <el-avatar :size="32" icon="el-icon-user" />
            <span>{{ currentUser?.name }}</span>
            <el-icon class="el-icon--right">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                <path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"/>
              </svg>
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleLogout">
                <el-icon>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                    <path fill="currentColor" d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"/>
                  </svg>
                </el-icon>
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>

    <el-container class="main-container">
      <!-- 侧边栏 -->
      <el-aside width="auto" class="sidebar">
        <el-menu
          :collapse="isCollapse"
          :default-active="$route.path"
          router
          unique-opened
          class="sidebar-menu"
          background-color="#8c0000"
          text-color="#fff"
          active-text-color="#ffcc00"
        >
          <el-menu-item v-for="item in menuItems" :key="item.index" :index="item.index">
            <el-icon>
              <component :is="item.icon" />
            </el-icon>
            <template #title>{{ item.title }}</template>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主内容区域 -->
      <el-main class="main-content">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.layout-container {
  height: 100vh;
  width: 100%;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #c62f2f;
  color: #fff;
  padding: 0 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  height: 64px;
  line-height: 64px;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo-container {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.logo-icon {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
}

.welcome-text {
  margin-right: 20px;
  font-size: 14px;
}

.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #fff;
}

.user-dropdown span {
  margin: 0 8px;
}

.main-container {
  height: calc(100vh - 64px);
}

.sidebar {
  background-color: #8c0000;
  transition: width 0.3s;
  overflow: hidden;
}

.sidebar-menu {
  height: 100%;
  border-right: none;
}

.main-content {
  padding: 20px;
  background-color: #f9f1e6;
  background-image: url('/src/assets/beijing-bg.jpg');
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
  overflow-y: auto;
}
</style>
